<!--
 * @Description: 选中地图点
 * @Author: zhao
 * @Date: 2022-07-02 09:53:34
 * @LastEditors: zhao
 * @LastEditTime: 2022-07-05 16:31:26
-->
<!--  -->
<template>
    <div class="model" ref="msgForm">
        <div class="guanbi cursor" @click="closure"></div>
        <p>
            <span>题名：</span>
            <span style="color: #4bb0e5" class="cursor ellipsis" @click="open()">{{ select.title }}</span>
        </p>
        <p>
            <span>作者：</span>
            <span class="ellipsis">{{ select.author }}</span>
        </p>
        <p>
            <span>形成单位：</span>
            <span class="ellipsis">{{ select.formInstitution }}</span>
        </p>
        <p>
            <span>档案号：</span>
            <span class="ellipsis">{{ select.sn }}</span>
        </p>
        <p>
            <span>摘要：</span>
            <span class="ellipsis">{{ select.abstract }}</span>
        </p>
        <div class="corner"></div>
    </div>
</template>

<script>
import Select from "ol/interaction/Select"
import Overlay from "ol/Overlay"
import { altKeyOnly, click, pointerMove } from "ol/events/condition"
import { toStringHDMS } from "ol/coordinate"
import { Vector as VectorLayer } from "ol/layer" // 实例化一个矢量图层Vector作为绘制层
import { Vector as VectorSource, TileJSON } from "ol/source"
import { Style, Icon, Fill, Stroke, Text, Circle as CircleStyle } from "ol/style"
import { LinearRing, Point, Polygon, Circle as geomCircle } from "ol/geom" // 点线面
import { fromCircle, fromExtent } from "ol/geom/Polygon" //
import { Feature } from "ol"
import imgblue from "@/assets/zuobiao_blue.png"
import imgred from "@/assets/zuobiao_red.png"
export default {
    name: "",
    data() {
        return {
            select: {}, //选中数据
            overlayForm: null, //弹窗实例
            selectClick: null,
            map: null,
            feature: null, //选中实例
            workAreaVectorSource: null,
            workAreaLayer: null,
        }
    },
    props: {
        markerLayer: Object,
    },
    components: {},

    computed: {},
    watch: {
        "$store.state.map.map"(val) {
            this.map = val
            this.getSelectInfo()
            // this.setTool()
            this.feature_Info()
        },
    },
    mounted() {},

    methods: {
        //地图点击事件 获取选中点信息
        getSelectInfo() {
            this.map.on("singleclick", (evt) => {
                const coordinate = evt.coordinate // 获取坐标

                var pixel = this.map.getEventPixel(evt.originalEvent) //坐标
                this.feature = this.map.forEachFeatureAtPixel(pixel, (features, layer) => {
                    //feature.getGeometry() 空间信息

                    this.$set(this.select, "LonLat", features.get("LonLat"))
                    this.$set(this.select, "title", features.get("Title"))
                    this.$set(this.select, "author", features.get("Author"))
                    this.$set(this.select, "company", features.get("Company"))
                    this.$set(this.select, "reference", features.get("Reference"))
                    this.$set(this.select, "abstract", features.get("Abstract"))
                    this.$set(this.select, "sn", features.get("sn"))

                    this.$set(this.select, "category", features.get("Category"))
                    this.$set(this.select, "district", features.get("District"))
                    this.$set(this.select, "formDate", features.get("FormDate"))
                    this.$set(this.select, "formInstitution", features.get("FormInstitution"))
                    this.$set(this.select, "workArea", features.get("WorkArea"))

                    this.$set(this.select, "workAreaMaxX", features.get("workAreaMaxX"))
                    this.$set(this.select, "workAreaMaxY", features.get("workAreaMaxY"))
                    this.$set(this.select, "workAreaMinX", features.get("workAreaMinX"))
                    this.$set(this.select, "workAreaMinY", features.get("workAreaMinY"))
                    //  if (features.values_.geometry instanceof Point) this.workArea(features.values_)
                    return features
                })

                if (this.feature && this.feature.getProperties().LonLat) {
                    setTimeout(() => {
                        // 设置弹窗位置
                        // 这里要设置定时器，不然弹窗首次出现，底图会跑偏

                        this.$store.state.map.overlayForm.setPosition(coordinate)
                        this.setToolred(this.feature)
                    }, 0)
                } else {
                    this.closure()
                }
            })
        },
        //创建弹出框模块
        feature_Info() {
            this.$store.state.map.overlayForm = new Overlay({
                // 创建一个图层
                element: this.$refs.msgForm, // 图层绑定我们上边的弹窗
                autoPan: true,
                autoPanMargin: -100,
                positioning: "bottom-right",
                autoPanAnimation: {
                    duration: -10,
                },
            })
            this.$store.state.map.overlayForm.setPosition(undefined) // 设置弹窗位置，刚开始我们不让他显示，就是undefined就行
            this.map.addOverlay(this.$store.state.map.overlayForm)
        },
        //改变选中点颜色
        setToolred(feature) {
            feature.setStyle(() => {
                return new Style({
                    image: new Icon({
                        src: imgred,
                        opacity: 1,
                        scale: "1", // 图片缩放比例
                    }),
                })
            })
            feature.changed()
        },
        setToolblue(feature) {
            feature.setStyle(() => {
                return new Style({
                    image: new Icon({
                        src: imgblue,
                        opacity: 1,
                        scale: "1", // 图片缩放比例
                    }),
                })
            })
            feature.changed()
        },
        closure() {
            //  this.$store.commit("map/empty")
            this.$store.state.map.overlayForm.setPosition(undefined)
        },

        open() {
            this.$store.commit("table/SET_ROWDATA", this.select)
            this.$router.push("/FileInfoDetails")
        },
        workArea(data) {
            this.$store.commit("map/empty")
            //实例化一个矢量图层Vector作为绘制层
            this.$store.state.map.workAreaSourceLayer = new VectorSource()
            //创建一个图层
            this.workAreaLayer = new VectorLayer({
                source: this.$store.state.map.workAreaSourceLayer,
            })
            // 将绘制层添加到地图容器中
            this.map.addLayer(this.workAreaLayer)

            var rectangle = new Feature({
                geometry: new fromExtent([data.workAreaMaxX, data.workAreaMaxY, data.workAreaMinX, data.workAreaMinY]),
            })

            rectangle.setStyle(
                new Style({
                    fill: new Fill({
                        color: "rgba(33,33,33,0.3)",
                    }),
                    stroke: new Stroke({
                        color: "#ffcc33",
                        width: 4,
                    }),
                    image: new CircleStyle({
                        radius: 7,
                        fill: new Fill({
                            color: "#ffcc33",
                        }),
                    }),
                })
            )
            this.$store.state.map.workAreaSourceLayer.addFeatures([rectangle])

            this.$store.commit("map/selfAdaptionZoom", this.workAreaLayer)
        },
    },
}
</script>
<style lang='scss' scoped>
.model {
    width: 500px;
    height: 230px;
    // border: 1px solid rgb(247, 169, 169);
    position: absolute;
    z-index: 111;
    // top: -230px;
    // left: -500px;
    background: white;
    padding: 0.33rem;
    margin: 0;
    box-shadow: rgb(0 0 0 / 50%) 0px 1px 5px;
    border-radius: 15px;
    position: relative;
    cursor: default;

    p {
        display: block;
        height: 25px;
        line-height: 25px;
        width: 100%;
        margin: 0;
        margin-bottom: 10px;
        display: flex;
        justify-content: stretch;
        font: 0.259rem Helvetica Neue, Helvetica, PingFang SC, \5fae\8f6f\96c5\9ed1, Tahoma, Arial, sans-serif;

        span:last-child {
            display: inline-block;
            width: 320px;
        }

        span:first-child {
            font-size: 0.28rem;
        }
    }

    .guanbi {
        width: 20px;
        height: 20px;
        position: absolute;
        right: 20px;
        top: 15px;
        font-size: 0.3rem;
        color: #409eff;
        background: url("../../assets/guanbi.png") no-repeat;
        background-size: 100% 100%;

        &:hover {
            color: #409eff;
        }
    }
}
</style>